<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<pre>
      Vue.set()、vm.$set() -- 了解，以后开发中很少使用
    
      修改数组，可以使用方法，也可以使用索引
      但是，使用索引对数据进行修改，数据不具有响应式，
      这时候，就可以使用 Vue.set()、vm.$set()

      // 第一个参数: 需要修改的数据
			// 第二个参数: 需要修改数据的索引
			// 第三个参数：修改以后的值
    </pre>

		<div id="app">
			<p v-for="(item, index) in arr" :key="index">{{ item }}</p>
			<p>{{ obj.name }}</p>
			<p>{{ obj.info }}</p>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					name: '',
					arr: ['汤姆', '杰瑞', '斯派克'],
					obj: { name: '亚瑟', info: '吃鸡' },
				},
			})

			// 使用索引对数据进行修改，数据不具有响应式
			// vm.arr[1] = '斯派克'

			// 第一个参数: 需要修改的数据
			// 第二个参数: 需要修改数据的索引
			// 第三个参数：修改以后的值

			Vue.set(vm.arr, 1, '斯派克')
			vm.$set(vm.arr, 0, '泰克')

			// vm.obj['age'] = 10
			// Vue.set(vm.obj, 'name', '蒙恬')
			// vm.$set(vm.obj, 'name', '蒙恬')
		</script>
	</body>
</html>
